<template>



	<view class="goods-carts">

		<!-- 轮播图 -->

		<view class="carouselChart">
			<liu-slide-img :heightNumber="720" :list="couponList" :autoplay="autoplay"
				:interval="interval"></liu-slide-img>

			<!-- 商品描述 -->
			<view class="carts-describe" v-if="goodInfoList">
				<view class="flex-betweens">
					<view class="flex-column-start">
						<text
							style="color: rgb(255, 0, 0);font-size: 40rpx;font-weight: 700;">{{goodInfoList.price}}元</text>
						<text
							style="text-decoration-line: line-through;color: rgb(198, 198, 198);font-size: 24rpx;">{{goodInfoList.market_price}}元</text>
					</view>
					<view class="flex-column">

						<text style="color: rgb(198, 198, 198)">销量:{{goodInfoList.sales_volume}}</text>
					</view>
				</view>
				<view class="flex-start-center-wrap" style="margin-top: 20rpx;">
					<text style="color: rgb(153, 153, 153);font-size: 26rpx;">支付方式</text>

					<view class="example-body" v-if="goodInfoList.buying_pattern==2">
						<view class="tag-view">
							<uni-tag text="现金购买"
								custom-style="background-color: rgb(245, 245, 245); border-color: rgb(245, 245, 245); color: rgb(102, 102, 102);font-weight: 600; margin-left: 20rpx;">
							</uni-tag>
						</view>
					</view>

					<view class="example-body" v-else>
						<view class="tag-view">
							<uni-tag text="现金加积分"
								custom-style="background-color: rgb(245, 245, 245); border-color: rgb(245, 245, 245); color: rgb(102, 102, 102);font-weight: 600; margin-left: 20rpx;">
							</uni-tag>
						</view>
					</view>

				</view>
				<view class="flex-start-center-wrap" style="margin-top: 35rpx;">
					<view class="font-overflow4" style="color: rgb(51, 51, 51);font-size: 30rpx;font-weight: 600;">
						{{goodInfoList.name}}
					</view>

				</view>

				<view class="flex-start-center-wrap" style="margin-top: 20rpx;">
					<text class="font-overflow2"
						style="color:rgb(153, 153, 153);font-weight: 600;">{{goodInfoList.title}}</text>

				</view>
				<view class="flex-betweens margin-top_16rpx" >
					<view class="flex-start-center-wrap" >

						<view class="example-body" v-for="(item,i) in myCouponList" :key="i">
							<view class="tag-view">
								<uni-tag :text="item.name"
									custom-style="background-color: rgb(255, 220, 220); border-color: rgb(255, 220, 220); color: rgb(255, 0, 0);font-weight: 600; margin-right: 20rpx;">
								</uni-tag>
							</view>
						</view>


					</view>
					<view class="couponCollection flex" @click="receiveCoupon()">

						<text>领券</text>
						<uni-icons type="right" color="#fff" size="15"></uni-icons>

					</view>
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="productIntroduction flex">
				<text class="line"></text>
				<text style="padding: 0 20rpx;color: rgb(153, 153, 153);font-size: 32rpx;">商品介绍</text>
				<text class="line"></text>
			</view>
			<!-- 商品详情 -->
			<view class="productDetail" v-if="goodInfoList">
				<rich-parser :html="goodInfoList.desc" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
					lazy-load ref="article" selectable show-with-animation use-anchor lazyLoad="true"></rich-parser>
				<view style="height: 90rpx;">

				</view>
			</view>
		</view>
		<uni-goods-nav class="goods-nav" :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
		<!-- 领取优惠券 -->
		<sunui-popup ref="receiveCouponPopup">
			<template v-slot:content>

				<view class="receiveCouponContain flex-column-Jstart">

					<view class="top flex-between">
						<view class="">

						</view>
						<text>先领券,在购物</text>
						<uni-icons @click='closeWriteOffIcon' class="uniIcon" type="clear" size="30"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit"
						@down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
						<scroll-view v-if="list.length" :scroll-y="true" style="height: 800rpx;">
							<block v-for="(item,index) in list" :key="index">
								<view class="content ">
									<view class="positionCoupon  flex">
										<text class="font-overflow">{{item.name}}</text>
									</view>
									<view class="couponPrice">
										<view class="flex-between ">
											<view class="flex">
												<view class="left">
													<text style="color: rgb(255, 0, 0)">￥</text>
													<text
														style="color: rgb(255, 0, 0);font-family: Inter;font-size: 64rpx;">{{item.discount_intensity}}</text>
												</view>
												<view class="flex-columns"
													style="height: 77rpx;justify-content: space-between;">
													<text
														style="color: rgb(255, 0, 0);font-size: 28rpx">{{ item.type === 3 ? '无门槛福利优惠券' : '满' + totelName(item.trigger_amount) + '减' +totelName(item.discount_intensity)  + '元' }}</text>
													<text
														style="color:rgb(153, 153, 153);font-size: 24rpx">{{extractedDate(item.end_time) }}到期
													</text>
												</view>
											</view>
											<view class="claimNow flex" @click="receiveCoupons(item)">
												立即领取
											</view>
										</view>
									</view>
								</view>

							</block>
						</scroll-view>
					</mescroll-body>
					<view v-if="list.length" class="bottom flex" @click="allReceiveCoupons()">
						全部领取
					</view>

				</view>

			</template>
		</sunui-popup>
		<!-- 购买详情 -->
		<sunui-popup ref="buyPopup">
			<template v-slot:content>
				<view class="buyContainer">
					<view class="top flex-between">
						<view style="margin-right: 20rpx;">
							<image class="img" :src="couponList[0].img" mode=""></image>
						</view>
						<view class="">
							<text style="color:rgb(51, 51, 51);font-size: 30rpx;font-weight: 700;"
								class="font-overflow2 ">{{goodInfoList.name}}</text>
							<view style="color:#ff0000;font-size: 38rpx;font-weight: 700;margin-top: 14rpx;">
								{{goodInfoList.price}}元
							</view>
						</view>
					</view>

					<!-- 数量 -->
					<view class="flex-between">
						<view style="margin: 28rpx 0;font-weight: 600;font-size: 32rpx">
							购买数量
						</view>
						<view class="">
							
							<uni-number-box @blur="changeValue" v-model="vModelValue"></uni-number-box>
						</view>
					</view>
					<!-- 支付方式 -->
					<view style="margin: 40rpx 0;font-weight: 600;font-size: 32rpx">
						<text style="margin-right:12rpx ;font-weight: 600;font-size: 32rpx">支付方式</text>
						<block v-if="goodInfoList.buying_pattern==1">
							<text>当前剩余积分：</text><text style="color: #ff0000;">{{userInfo.surplus_integral}}</text>
						</block>
					</view>
					<view class="flex-start-center-wrap">


						<view class="example-body flex-start-center">
							<view class="tag-view" v-if="goodInfoList.buying_pattern==1">
								<uni-tag text="现金加积分"
									custom-style="background-color: rgb(245, 245, 245);border-radius: 160rpx; border-color: rgb(245, 245, 245); color:rgb(102, 102, 102);font-weight: 600; display:inline-block; margin:0 20rpx 20rpx 0;height: 50rpx;text-align:center;line-height:50rpx;font-size: 26rpx">
								</uni-tag>
							</view>
							<view class="tag-view" v-if="goodInfoList.buying_pattern!=1">
								<uni-tag text="现金购买"
									custom-style="background-color: rgb(245, 245, 245);border-radius: 160rpx; border-color: rgb(245, 245, 245); color: rgb(102, 102, 102);font-weight: 600; display:inline-block; margin:0 20rpx 20rpx 0;height: 50rpx;text-align:center;line-height:50rpx;font-size: 26rpx">
								</uni-tag>
							</view>
						</view>

					</view>

					<!-- 领取兑换 -->
					<!-- 	<view v-if="goodInfoList.buying_pattern==1" class="collection flex" @click="placeOrder()">
						立即兑换：60000积分
					</view> -->
					<view class="collection flex" @click="placeOrder()">
						立即购买：{{goodInfoList.price*Number(vModelValue)}}元
					</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				options: [{
					icon: 'home',
					text: '首页',
					color: '#ff0000'

				}, {
					icon: 'headphones',
					text: '客服',
					color: '#646566'
				}],
				buttonGroup: [{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff',
					isDIV:false
					
				}],
				// 轮播图
				couponList: [],
				autoplay: true,
				interval: 3000,
				vModelValue: 0,

				goodInfoList: null,
				token: uni.getStorageSync('login').token,
				userInfo: null,
				signParams: null,
				linkPhone: null,
				myCouponList:[],
			
			}
		},
		onLoad(options) {

			if (options) {

				if (options.orderId) {
					this.init(options)
				} else {

					this.init(options.id)
				}


			}
			this.signFn()
			this.initMyCoupon()

		},
		onShow() {
			this.$at.releaseKey('submit')
			this.$at.releaseKey('submitAll')
			this.mescroll?.resetUpScroll();
		},
		computed: {

			extractedDate: function() {
				return function(time) {

					return time.split(' ')[0];
				};
			},
			totelName: function() {
				return function(nums) {
					let num
					if (nums.endsWith(".00")) {
						num = nums.slice(0, -3); // 去除末尾的 ".00"
					}
					if (nums >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						console.log(nums)
						return num ? num : nums;
					}
				};
			},
		},
		methods: {
			
			async initMyCoupon() {
				const result = await this.$http.post({
					url: this.$api.myCoupon,
					data: {
						page: 1,
						limit: 2,
						status: 1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (result.code == 0) {

                    this.myCouponList=result.data.list
					

					// this.$sun.toast(result.msg, 'none')
				

				} else {
					
					this.$sun.toast(resPoster.msg, 'none')
				}
			},
			async signFn() {
				// console.log('https://ship.admin168.net/H5/index.html?id=4#/'.split('#/')[0].split("?")[0])
				// window.location.href.split('#/')[0].split("?")[0]
				const result = await this.$http.post({
					url: this.$api.sign,
					data: {
						url: window.location.href.split('#/')[0]


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.signParams = result.data
					this.$wx.config({
						debug: false,
						appId: this.signParams.appId,
						timestamp: this.signParams.timestamp,
						nonceStr: this.signParams.noncestr,
						signature: this.signParams.sign,
						jsApiList: [
							'updateAppMessageShareData',
							'updateTimelineShareData',
							'onMenuShareTimeline',
							'onMenuShareAppMessage',
							'onMenuShareQQ',
							'onMenuShareWeibo',
							'wx-open-launch-weapp',
							'getLocation',
							'checkJsApi',
							'chooseContact',
							'scanQRCode'
						],
						openTagList: ['wx-open-launch-weapp']
					});

					// 获取手机是否开启定位
					this.$wx.ready(() => {
						this.$wx.checkJsApi({
							jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline',
								'onMenuShareQQ', 'onMenuShareWeibo'
							],
							success: res => {
								if (res.checkResult.getLocation == false) {
									alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！' +
										JSON.stringify(res));
									return;
								}
								// alert('成功！' + JSON.stringify(res));
							},
							fail: res => {
								// alert('失败！' + JSON.stringify(res));
							},
							complete: res => {

								// alert('所有' + JSON.stringify(res));
							}
						});
						// 设置分享朋友圈/好友配置——需展示
						this.sharingSettings()
					});

				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			changeValue(e){
				
				console.log(e,this.vModelValue)
			},
			sharingSettings() {

				// https://ship.admin168.net/H5/index.html?id=4#/pages/shop/shoplDetailsPage/shoplDetailsPage?id=1
				//let linkHref = window.location?.origin +
				// 'index.php/wechatLogin?url=H5/index.html&invite=' +  uni.getStorageSync('login').invite_code

				let linkHref = window.location?.origin +
					'/H5/index.html?id=' + this.userInfo.id + '#/pages/shop/shoplDetailsPage/shoplDetailsPage?orderId=' +
					this.goodInfoList.id
				console.log('href11112324234', linkHref);

				let params = {
					title: this.goodInfoList.name, // 分享标题
					link: linkHref,

					desc: this.goodInfoList.title, //详情
					imgUrl: this.couponList[0].img // 分享图标
				};
				this.$wx.onMenuShareAppMessage(params); //分享给好友
				this.$wx.onMenuShareTimeline(params); //分享到朋友圈
				this.$wx.onMenuShareQQ(params); //分享给手机QQ
				this.$wx.onMenuShareQZone(params); //分享给手机QQ空间
				this.$wx.onMenuShareWeibo(params); //分享给微博
			},
			allReceiveCoupons() {
				this.$at.uniDoFunc({
					key: 'submitAll',
					success: async () => {
						this.$at.lockKey('submitAll');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择

						const idArr = this.list.map((item) => {
							return item.id
						})
						console.log(idArr)
						const result = await this.$http.post({
							url: this.$api.receiveCoupon,
							data: {
								id: idArr
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})

						if (result.code == 0) {


							this.$at.releaseKey('submitAll');


							this.$sun.toast(result.msg, 'none')
							// this.$sun.toast(resPoster.msg, 'none')
							setTimeout(() => {
								this.mescroll?.resetUpScroll();
							}, 500)

						} else {
							this.$at.releaseKey('submitAll');
							this.$sun.toast(result.msg, 'none')
						}


					}
				});




			},
			// 领券优惠券
			async receiveCoupons(item) {
				console.log(item)
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择



						const result = await this.$http.post({
							url: this.$api.receiveCoupon,
							data: {
								id: [item.id]
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})

						if (result.code == 0) {


							this.$at.releaseKey('submit');


							this.$sun.toast(result.msg, 'none')
							// this.$sun.toast(resPoster.msg, 'none')
							setTimeout(() => {
								this.mescroll?.resetUpScroll();
							}, 500)

						} else {
							this.$at.releaseKey('submit');
							this.$sun.toast(result.msg, 'none')
						}


					}
				});
			},
			async init(orderId) {
				console.log(orderId)
				const res = await this.$http.post({
					url: this.$api.goodsInfo,
					data: {

						id: orderId

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (res.code == 0) {



					console.log(res.data)

					this.goodInfoList = res.data
					let host_imgList = res.data.host_img.split(',').map((item) => {
						return {
							img: item
						}
					});
					this.couponList = host_imgList
					console.log(this.couponList)
					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(res.msg, 'none')
				}
				const result = await this.$http.post({
					url: this.$api.userinfo,
					data: {
						id: uni.getStorageSync('userId'),

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.userInfo = result.data
				} else {
					this.$sun.navGo(result.msg, 'none')
				}
				// 获取到当前的用户信息

			},
			async onClick(e) {
				if (e.content.text == '首页') {
					this.$sun.navRe('/pages/firstPage/firstPage')
				}
				if (e.content.text == '购物车') {
					this.$sun.navGo('/pages/purchaseCar/purchaseCar')
				}

				if (e.content.text == '客服') {
					const resTool = await this.$http.post({
						url: this.$api.module,
						data: {
							type: 1
						},
						headers: {
							'Authorization': `Bearer ${this.token}`
						}

					})

					console.log(resTool)
					if (resTool.code == 0) {
						console.log(resTool)
						// this.$sun.toast(resTool.msg, 'none')
						this.linkPhone = resTool.data.find((item) => {
							return item.fixed_name == '在线客服'
						})
					
						if (this.linkPhone?.link) {
							this.$sun.phone(this.linkPhone.link)
							// uni.setClipboardData({
							// 	data: this.linkPhone.link
							// });
						} else {
							this.$sun.toast('商家没有设置在线客服')
						}

					} else {

						this.$sun.toast(resTool.msg, 'none')
					}
				}


			},
			buttonClick(e) {
				console.log(e)
				if (e.content.text == '立即购买') {

					this.$refs.buyPopup.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: true, //false使用户不能点击其它关闭页面
						topclose: false,
						zIndex: 99999
					});
				}
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.couponList,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			// 领取优惠券
			receiveCoupon() {


				this.$refs.receiveCouponPopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});

			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.receiveCouponPopup.close()
			},
			// 下单
			placeOrder() {
				if (this.vModelValue == 0) {
					this.$sun.toast('请选择购买数量', 'none')
					return
				}

				console.log({
					...this.goodInfoList,
					...{
						vModelValue: this.vModelValue
					}
				})
				this.$refs.buyPopup.close()
				this.$sun.navGo('/pages/shop/orderPage/orderPage', {
					...this.goodInfoList,
					...{
						vModelValue: this.vModelValue
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.buyContainer {
		background-color: #fff;
		height: 40vh;
		padding: 0 30rpx;

		.top {
			.img {
				width: 230.02rpx;
				height: 232rpx;
				border-radius: 10px;
				margin-top: -50rpx;

			}


		}
        
		.selectStyle {
			margin-top: 56rpx;
		}

		.collection {
			width: 92%;
			height: 88rpx;
			border-radius: 148rpx;
			color: rgb(255, 255, 255);

			font-size: 32rpx;
			font-weight: 600;
			background: rgb(255, 57, 38);
			position: fixed;
			bottom: 26rpx;
		}
	}

	.receiveCouponContain {
		background-color: #fff;
		height: 50vh;
		height: auto;
		overflow-x: auto;


		.top {
			padding: 30rpx 0;
			width: 100%;

			text {
				color: rgb(0, 0, 0);
				font-size: 36rpx;
				font-weight: 400;
			}
		}

		.content {

			width: 698rpx;
			height: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: rgb(255, 242, 242);

			.positionCoupon {
				padding: 8rpx;
				width: 154rpx;
				height: 50rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: rgb(255, 0, 0);
				background: rgb(255, 219, 219);
				font-size: 24rpx;
			}

			.couponPrice {
				padding: 20rpx 26rpx;

				.left {
					margin-right: 32rpx;
				}

				.claimNow {
					width: 144rpx;
					height: 58rpx;
					border-radius: 25rpx;
					color: #fff;
					background: rgb(255, 0, 0);
				}
			}
		}

		.bottom {
			border-radius: 600rpx;
			width: 662rpx;
			height: 96rpx;
			box-shadow: 0px 4px 4px 0px rgba(28, 197, 45, 0.2);
			background: rgb(255, 0, 0);
			color: #fff;
			position: fixed;
			bottom: 20rpx;
		}
	}

	.goods-carts {
		.goods-nav {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
			z-index: 99999;
		}

		.carts-share {
			background-color: #fff;
			padding: 40rpx 18rpx 40rpx;

			.shareIcon {
				width: 31.88rpx;
				height: 32rpx;
			}

		}

		.carts-describe {
			margin-top: -20rpx;
			padding: 40rpx 18rpx 40rpx;
			background-color: #fff;

			.couponCollection {
				padding-left: 15rpx;
				color: #fff;
				width: 110rpx;
				height: 48rpx;
				border-radius: 100px;
				background: rgb(255, 57, 38);

				.arrow {
					width: 26.86rpx;
					height: 26.88rpx;
				}
			}
		}

		.productIntroduction {
			margin: 36rpx 0;

			.line {
				width: 108px;
				height: 0;
				border: 1px solid rgb(230, 230, 230);
			}
		}

		.productDetail {
			// background-color: #fff;
			// padding: ;

		}
	}
</style>